<template>
    <div id="apply">
        <div class="flitercon">
            <div class="fliteritem" style="width: 30%;">
                申请状态：
                <el-select v-model="stateid" @change="selDevice" clearable placeholder="选择申请状态" style="width: 240px">
                    <el-option v-for="item in StateList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="fliteritem" style="width: 40%;">
                发布时间：
                <el-date-picker format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" v-model="time"
                    @change="selTime" type="datetimerange" range-separator="到" start-placeholder="开始时间"
                    end-placeholder="结束时间" />
            </div>
            <div class="fliteritem" style="width: 20%;justify-content: flex-end;">
                <el-button type="success" icon="Printer" size="default" @click="exporExcel('发布历史')">
                    导出
                </el-button>
            </div>
        </div>
        <el-scrollbar height="calc(100vh - 215px)">
            <div class="release_table">
                <el-table v-show="!qbbshow" id="out" :data="ApplyList" border stripe
                    style="width: 100%; height: calc(100vh - 260px); border-bottom: 1px #263342 solid;">
                    <el-table-column align="center" type="index" label="序号" width="60" />
                    <el-table-column label="申请人" width="160">
                        <template #default="scope">
                            {{ scope.row.applicant?scope.row.applicant.nickname:'' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="联系方式" width="160">
                        <template #default="scope">
                            {{ scope.row.applicant?scope.row.applicant.tel:'' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="apply_time" label="申请时间" width="200" />
                    <el-table-column label="申请状态" width="180">
                        <template #default="scope">
                            <div v-show="scope.row.state == 2" style="color: #00ff00;">发送成功</div>
                            <div v-show="scope.row.state == 3" style="color: #ff0000;">审核未通过</div>
                            <div v-show="scope.row.state == 1" style="color: #ffff00;">已撤销</div>
                            <div v-show="scope.row.state == 0" style="color: #ccc;">待审核</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button @click="applyDetail(scope.row)" icon="Menu" type="primary" size="default">详情</el-button>
                            <el-button v-show="Edit && scope.row.state == 0" @click="passApply(scope.row)"
                                type="success" icon="Check" size="default">通过</el-button>
                            <el-button v-show="Edit && scope.row.state == 0" @click="rejectApply(scope.row)"
                                type="danger"  icon="CircleCloseFilled" size="default">驳回</el-button>
                            <el-button v-show="!Edit && scope.row.state == 0" @click="withdrawApply(scope.row)"
                                type="warning" icon="Failed" size="default">撤回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button v-show="qbbshow" size="default" type="primary" @click="qbbshow = false" icon="Back"
                    style="margin-bottom: 10px;">返回</el-button>
                <el-table v-show="qbbshow" id="out" :data="tableData" border stripe
                    style="width: 100%; height: calc(100vh - 300px); border-bottom: 1px #263342 solid;">
                    <el-table-column align="center" type="index" label="序号" width="60" />
                    <el-table-column align="center" label="发送状态" width="100">
                        <template #default="scope">
                            <el-icon color="#00ff00" v-show="scope.row.last_send_complete">
                                <CircleCheckFilled />
                            </el-icon>
                            <el-icon color="#eb4560" v-show="!scope.row.last_send_complete">
                                <WarningFilled />
                            </el-icon>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="是否在线" width="100">
                        <template #default="scope">
                            <img :src="scope.row.online == 1 ? './img/zx_ico.png' : './img/zx_icol.png'" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="类型" width="80">
                        <template #default="scope">
                            <div>{{ scope.row.model ? scope.row.model.label : '' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="150" />
                    <el-table-column prop="content" label="内容">
                        <template #default="scope">
                        <div ref="scroolArea"
                            style="display: flex;justify-content: space-around;position: relative;height: 26px;align-items: center;">
                            <div class="m_area" style="position: absolute;width: 100%;">
                                <span class="m_content" v-for="(item, index) in scope.row.playList"
                                    :style="{ color: formatColor(item.font_color) }">
                                    {{ item.content }}
                                </span>
                            </div>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column label="IP地址" width="180">
                        <template #default="scope">
                            <div>
                                {{ scope.row.ip }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="位置" width="180">
                        <template #default="scope">
                            <div>
                                {{ scope.row.hw_code }}+K{{ scope.row.stake }} {{
                                    scope.row.direction ? scope.row.direction.label : '' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template #default="scope">
                            <div>
                                <el-button size="default" icon="Menu" type="primary"
                                    @click="changeBoard(scope.row)">详情</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination style="margin-top: 10px;" @sendsize="getsize" @sendpage="getpage" :page="page"></pagination>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch } from 'vue';;
import $sys from '../../api/sys';
import { ElMessage, ElMessageBox } from 'element-plus';
import { mainStore } from "../../store/index";
import pagination from '../../components/pagination.vue';
import { Promotion, DocumentCopy,Menu,Back,Printer} from '@element-plus/icons-vue';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
const $store = mainStore();
const roleList = ref([]);
const stateid = ref('');
const time = ref();
onMounted(() => {
    checkRole()
    getApplyList();
    getDeviceList();
})
function getsize(e) {
    page.pagesize = e;
    getApplyList();
}
function getpage(e) {
    page.pagenum = e;
    getApplyList();
}
const StateList = ref([
    {
        label: '待审核',
        value: 0
    },
    {
        label: '已撤回',
        value: 1
    },
    {
        label: '已通过',
        value: 2
    },
    {
        label: '未通过',
        value: 3
    }
]);
function withdrawApply(e) {
    ElMessageBox.confirm('确定撤回该发布申请吗？', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        $sys.withdrawApply(e.id).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: res.message,
                    type: 'success'
                })
                getApplyList();
            } else {
                ElMessage({
                    message: res.message,
                    type: 'warning'
                })
            }
        })
    })
}
function rejectApply(e) {
    ElMessageBox.prompt('请输入您的审批意见', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    })
        .then(({ value }) => {
            let obj = {}
            obj.id = e.id;
            obj.remark = value;
            $sys.rejectApply(obj).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        message: res.message,
                        type: 'success'
                    })
                    getApplyList();
                } else {
                    ElMessage({
                        message: res.message,
                        type: 'warning'
                    })
                }
            })
        })
        .catch(() => {

        })
}
function passApply(e) {
    ElMessageBox.confirm('是否确认？', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        console.log(e);
        let obj = {};
        obj.id = e.id;
        $sys.passApply(obj).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: res.message,
                    type: 'success'
                })
                getApplyList();
            } else {
                ElMessage({
                    message: res.message,
                    type: 'warning'
                })
            }
        }).catch(err => {
            ElMessage({
                message: '操作失败,请刷新后重试',
                type: 'warning'
            })
        })
    }).catch(() => {

    });
}
const Edit = ref(false);
function checkRole() {
    roleList.value = JSON.parse(localStorage.getItem('role'));
    Edit.value = false;
    roleList.value.forEach((item, index) => {
        if (item.code == 'info-board-review'||item.code=='administrator') {
            Edit.value = true;
        } else {
            Edit.value = false;
        }
    })
}
const qbbshow = ref(false);
const ApplyList = ref([]);
function changeBoard(e) {
    localStorage.setItem('boardid', e.id);
    localStorage.setItem('IsApply', 1);
    $store.InfoboradID = e.id;
    setTimeout(() => {
        $store.InfoboradDlg = true;
    }, 50)
}
const page = reactive({
    pagenum: 1,
    pagesize: 10,
    total: 0
})
function selDevice(e) {
    page.state = e;
    page.pagenum = 1;
    getApplyList();
}
function selTime(e) {
    if (e) {
        page.start_time = e[0];
        page.end_time = e[1];
    } else {
        page.start_time = '';
        page.end_time = '';
    }
    page.pagenum = 1;
    getApplyList();
}
function getApplyList() {
    $sys.getApplyList(page).then(res => {
        console.log(111,res);
        page.total = res.data.count;
        ApplyList.value = res.data.result;
    })
}
const applyDevice = ref([]);
function applyDetail(e) {
    //console.log(e.id);
    $sys.getDeviceByApply(e.id).then(res => {
        if (res.code == 200) {
            qbbshow.value = true;
            tableData.value = res.data;
        }
    })
}
const tableData = ref([]);
function getDeviceList() {
    $sys.deviceList().then(res => {
        if (res.code == 200) {
            tableData.value = [];
            res.data.forEach((item, index) => {
                if (item.applying) {
                    tableData.value.push(item);
                }
            })
        }
    })
}
function formatColor(string) {
    const r = string.substring(0, 3);
    const g = string.substring(3, 6);
    const b = string.substring(6, 9);
    const a = string.substring(9, 12);
    return `rgba(${r},${g},${b},1)`;
}
</script>
<style scoped>
.el-scrollbar__view {
    padding-bottom: 10px;
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}

:deep(.el-button--small span) {
    font-size: 12px !important;
}

:deep(*) {
    font-size: 16px;
}

.m_content {
    margin-left: 5px;
}

#apply {
    background-color: #2F4052;
    width: 100%;
    padding: 0 10px;
}

:deep(thead .el-checkbox__inner) {
    display: none;
}

:deep(.el-dialog) {
    background-color: #2F4052 !important;
}

:deep(.el-dialog__title),
:deep(.el-dialog__body) {
    color: white !important;
}

:deep(.el-scrollbar__wrap--hidden-default) {
    background-color: #2F4052;
    border-bottom: 1px #2F4052 solid;
}

.release_con {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
    height: 70px;
}

.release_btn {
    color: #17DD27;
    line-height: 30px;
    background-color: #44596E;
    padding: 0 12px;
    border-radius: 3px;
    cursor: pointer;
}
.m_area {
    white-space: nowrap;
    /* 确保文本在一行内显示 */
    overflow: hidden;
    /* 隐藏超出容器的部分 */
    text-overflow: ellipsis;
}
.release_table {
    /* padding: 10px 0; */
    background-color: #304053;

    width: 100%;
    /* border-bottom: 1px #44596E solid; */
    /* overflow-y: auto; */
}

.flitercon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px;
    background-color: #2F4052;
    height: 70px;
    margin-bottom: 10px;
}

.fliteritem {
    display: flex;
    align-items: center;
    color: white;
}
</style>

<style lang='less'>
// 时间范围选择框样式
.el-picker-panel {
    background-color: #2f4052;
}

.el-date-table td .el-date-table-cell .el-date-table-cell__text {
    color: #b2c9ee;
}

.el-picker-panel__footer {
    background: #263343;
    border-top: 1px #222e3b solid;
}

.el-date-range-picker__time-header {
    border-bottom: 1px #222e3b solid;
}

.el-picker__popper.el-popper {
    border: 1px #222e3b solid;
}

.el-picker-panel__icon-btn {
    color: #b2c9ee;
}

.el-picker-panel {
    color: #b2c9ee;
}

.el-date-table th {
    color: #b2c9ee;
    border-bottom: 1px #222e3b solid;
}

.el-date-range-picker__content.is-left {
    border-right: 1px #222e3b solid;
}

.el-button.is-disabled {
    background: #1b95f8;
    border: 1px #222e3b solid;
}

.el-button.is-plain {
    --el-button-hover-bg-color: #1b95f8;
    background: #1b95f8;
    border: 1px #222e3b solid;
}

.el-date-table td.in-range .el-date-table-cell {
    background-color: #222e3b
}

.el-button.is-disabled,
.el-button.is-disabled:hover {
    background: #1b95f8;
    border: 1px #222e3b solid;
}

.el-date-table td.in-range .el-date-table-cell:hover {
    background: #222e3b;
}

// .el-button{background: #1b95f8;border: 1px #222e3b solid;}
.el-button.is-text:not(.is-disabled):hover {
    background: #888;
    border: 1px #222e3b solid;
}

.el-input.is-disabled .el-input__wrapper {
    background: #222e3b;
}

.el-input.is-disabled .el-input__inner {
    color: #b2c9ee;
}

.el-input__inner {
    color: #b2c9ee;
}

.el-date-editor .el-range-input {
    color: #aaa;
}

.el-input__wrapper {
    background: #324458;
    box-shadow: 0 0 0 1px #263342 !important;
}

.el-message-box {
    background-color: #2f4052 !important;
}

.el-message-box__message,
.el-message-box__title {
    color: #fff;

}

#apply {

    .el-date-editor .el-range-separator {
        color: #aaa;
    }


    .el-select__wrapper {
        background-color: #2f4052;
        box-shadow: 0 0 0 1px #263342 !important;
    }

    .el-select__placeholder {
        color: #aaaaaa;
    }

    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
        background: none;
    }

    .el-table__inner-wrapper {
        &::before {
            display: none;
        }
    }

    // 头部样式
    .el-table__header-wrapper th {
        background-color: #2F4052;
        color: #fff;
    }

    // 内容行样色
    .el-table__row {
        background-color: #2F4052;
        color: #B2C9EE;
    }

    // 内容行边框
    .el-table__cell {
        border: 1 !important;
        border-color: #222e3b;
    }

    .el-table--border .el-table__inner-wrapper:after,
    .el-table--border:after,
    .el-table__border-left-patch {
        background-color: #263342;
    }

    //自定义斑马线和鼠标移入样式
    .el-table--enable-row-hover .el-table__body tr:hover:nth-child(even)>td {
        background-color: #263343 !important;
    }

    .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td {
        background-color: #2F4052 !important;
    }

    .el-table__body tr:nth-child(even) {
        background-color: #263343;
        /* 偶数行（斑马线）的默认背景色 */
    }

}
</style>